<script lang="ts">
import DictTag from '@/components/DictTag.vue'

export default {
  options: {
    virtualHost: true, // 虚拟节点
    styleIsolation: 'shared', // 解除样式隔离
  },
}
</script>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  active?: boolean
  data: any
  disabled?: boolean
}>(), {
  active: false,
  data: () => ({}),
  disabled: false,
})
</script>

<template>
  <view class="lesson-cell flex-row-between-center border" :class="{ active: props.active }">
    <view class="flex-row-start-center">
      <text class="mr-8px text-15px fw-500 text-main">
        {{ data.lessonDate }} {{ data.startTime }}-{{ data.endTime }} {{ data.weekName }}
      </text>
      <DictTag code="LessonStatusEnum" :value="data.lessonStatus" />
    </view>

    <text class="text-14px text-secondary">
      {{ data.title }}
    </text>
  </view>
</template>

<style lang="scss" scoped>
  .lesson-cell {
    background-color: #FFFFFF;

    height: 44px;
    padding: 0px 12px;
    border-radius: 4px;
  }

  .disabled {
    filter: grayscale(100%);
  }

  .border {
    border: 1px solid transparent;
  }

  .active {
    border-color: #33AD7C;
    background-color: #ECFFF8 !important;
  }
</style>
